<!-- 赛事信息界面 -->
<template>
  <div
    class="
      venue-display
      flex flex-direction
      strut-absolute
      padding-top-xl padding-lr-xl padding-bottom-xs
    "
    style="overflow-y: scroll; overflow-x: hidden; height: 100%"
  >
    <br>
    <el-table border
    :data="data">
      <el-table-column label="队伍名称" align="center" width="200"
     >
      <template slot-scope="scope">
        <el-button type="text" @click="teamDeatil(scope.row.teamId, scope.row.teamName, scope.row.teamInfo, scope.row.teamDemand, scope.row.captainName)">
          {{ scope.row.teamName }}
        </el-button>
      </template>
    </el-table-column>
    <el-table-column label="赛事名称" align="center" prop="contestName" width="200">
    </el-table-column>
    <el-table-column label="队长姓名" align="center" width="100"
      prop="captainName">
    </el-table-column>
    <el-table-column label="队伍介绍" align="center"
      prop="teamInfo">
    </el-table-column>
    <el-table-column label="队伍需求" align="center" prop="teamDemand"></el-table-column>
    <el-table-column label="操作" align="center" width="400">
      <template slot-scope="scope">
        <el-button type="primary" @click="openEditTeamDialog(scope.row.teamId, scope.row.teamName, scope.row.teamInfo, scope.row.teamDemand)">
          编辑队伍
        </el-button>
        <el-button type="warning" @click="openReplaceCaptainDialog(scope.row.teamId, scope.row.captainName, scope.row.captainId)">更换队长</el-button>
        <el-button type="danger" @click="removeTeam(scope.row.teamId)">
          解散队伍
        </el-button>
      </template>
    </el-table-column>                
    </el-table>

    <el-dialog class="teamInfoX" width="50%" :visible.sync="dialogVisible" title="队伍信息">
      <span>
        <h1>{{ teamName }}</h1>
        <el-button style="float:right; margin-right: 20px;" type="primary" @click="openAddMemberDialog()">添加成员</el-button>
        <h3>队长：{{ captainName }}</h3>
        <h3>队伍介绍：{{ teamInfo }}</h3>
        <h3>队伍需求：{{ teamDemand }}</h3>
      </span>
      <el-table border
      :data="teamMembers">
      
      <el-table-column property="username" label="队伍成员"  align="center" width="200">
        <template slot-scope="scope">
          <el-button type="text" @click="getUserInfo(scope.row.userId, true)">
          {{ scope.row.username }}
          </el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column property="time" label="入队时间" align="center"></el-table-column> -->
      <el-table-column property="joinNote" label="入队宣言"  align="center" ></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="danger" @click="kickOutMember(scope.row.userId)">踢出队伍</el-button>
        </template>
      </el-table-column>

    </el-table>
    </el-dialog>
    <el-dialog
    style="margin-left: 30%;width: 40%;"
    :visible.sync="editTeamInfoVisable">
      <el-form inline="inline" v-model="editTeamInfoParam">
        <el-form-item label="队伍名称">
          <el-input v-model="editTeamInfoParam.teamName">
          </el-input>
        </el-form-item>
        <el-form-item label="队伍介绍">
          <el-input type="textarea"
          v-model="editTeamInfoParam.teamInfo">
          </el-input>
        </el-form-item>
        <el-form-item label="队伍需求">
          <el-input type="textarea" v-model="editTeamInfoParam.teamDemand">
          </el-input>
        </el-form-item>
          <el-button style="width: 30%;" @click="cancelCreateTeam">取消</el-button>
          <el-button style="margin-left: 20%;" type="primary" @click="editTeam">修改</el-button>
      </el-form>
    </el-dialog>

    <el-dialog :visible.sync="replaceCaptainVisible" title="更换队长" style="width:800px;margin-left:500px"> 
      <el-form >
        <el-form-item label="当前队长：">
          {{ captainName }}
        </el-form-item>
        <el-form-item label="任命队长:">
          <el-select  placeholder="请选择队长" v-model="selectCaptainId" >
            <el-option v-for="item in teamMembers" :key="item.userId" :label="item.username" :value="item.userId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button  @click="cancelReplaceCaptain">取消</el-button>
          <el-button  type="primary" @click="replaceCaptain">修改</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="addMemberVisible" title="添加成员" style="width:800px;margin-left:500px">
      <el-form>
        <el-form-item label="成员">
          <el-select v-model="otherUserId" placeholder="请选择成员">
            <el-option v-for="item in otherUserList" :key="item.id" :value="item.id" :label="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button  @click="cancelAddMember">取消</el-button>
          <el-button  type="primary" @click="addMember">添加</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
 
  </div>
</template>

<script>

import { getTeamInfoList,getContestSpeciesList,getTeamMembers,removeTeam, editTeam, kickOutMember, replaceCaptain, getOtherUserList, addMember} from '@/api/eventSection';
import { log } from 'console';
export default {
  data() {
    return {
      sortList:[],
      data: [],
      teamMembers:[],
      contestId:1,
      speciesList: [],
      otherUserList:[],
      otherUserId:"",
      selectCaptainId: "",
      teamName:"",
      teamInfo:"",
      teamDemand:"",
      captainId:"",
      captainName:"",
      currentTeamId:0,
      searchParam:{
        speciesId:'',
        sort:''
      },
      editTeamInfoParam:{
        teamId:'',
        teamName:'',
        teamInfo:'',
        teamDemand:'',
      },
      dialogVisible: false,
      editTeamInfoVisable: false,
      replaceCaptainVisible:false,
      addMemberVisible:false,
    }
  },

  mounted() {
    this.contestId = this.$route.query.contestId
    this.getContestSpeciesList()
    this.getTeamInfoList()

  },
  methods: {
    addMember(){
      addMember(this.otherUserId, this.currentTeamId).then(res => {
        if(res.data.code == 200) {
          this.$message({
            message: res.data.data,
            type:'success'
          })
          this.addMemberVisible=false;
          this.getTeamMembers();
        } else {
          this.$message({
              message:res.data.msg,
              type:'error'
          })
        }
      })
    },
    cancelAddMember(){
      this.addMemberVisible=false;
    },
    openAddMemberDialog(){
      // 获取不在该队伍中的成员
      getOtherUserList(this.currentTeamId).then(res => {
        if(res.data.code == 200) {
          this.otherUserList = res.data.data;
        }
      })
      this.addMemberVisible=true;
    },
    replaceCaptain(){
      replaceCaptain(this.currentTeamId, this.selectCaptainId).then(res => {
        if(res.data.code == 200) {
          this.$message({
            message: res.data.data,
            type:'success'
          })
          this.replaceCaptainVisible=false;
          this.getTeamInfoList();
        } else {
          this.$message({
              message:res.data.msg,
              type:'error'
          })
        }
      }
      )
    },
    cancelReplaceCaptain(){
      this.replaceCaptainVisible = false;
    },
    async openReplaceCaptainDialog(teamId, captainName, captainId) {
      this.currentTeamId = teamId;
      await this.getTeamMembers();
      this.captainName = captainName;
      this.captainId = captainId;
      this.replaceCaptainVisible = true;
    },
    kickOutMember(userId) {
      kickOutMember(userId, this.currentTeamId).then(res => {
        if(res.data.code == 200) {
          this.$message({
            message: res.data.data,
            type:'success'
          })
          this.getTeamMembers();
        } else {
          this.$message({
              message:res.data.msg,
              type:'error'
          })
        }
      })
    },
    openEditTeamDialog(teamId, teamName, teamInfo, teamDemand) {
      this.editTeamInfoVisable = true;
      this.editTeamInfoParam.teamId =  teamId;
      this.editTeamInfoParam.teamName =  teamName;
      this.editTeamInfoParam.teamInfo =  teamInfo;
      this.editTeamInfoParam.teamDemand =  teamDemand;
    },
    editTeam() {
      editTeam(this.editTeamInfoParam).then(res => {
        if(res.data.code == 200) {
          this.$message({
            message: res.data.data,
            type:'success'
          })
          this.editTeamInfoVisable = false;
          this.getTeamInfoList();
        } else {
          this.$message({
              message:res.data.msg,
              type:'error'
          })
        }
      })
    },
    removeTeam(teamId){
      removeTeam({teamId:teamId}).then(res => {
        if(res.data.code === 200){
          this.$message({
            message:res.data.msg,
            type:'success'
          })
          this.getTeamInfoList()
        }else{
          this.$message({
            message:res.data.msg,
            type:'error'
          })
        }
      })
    },
    teamDeatil(teamId, teamName, teamInfo, teamDemand, captainName){
      this.currentTeamId = teamId;
      getTeamMembers({teamId:teamId}).then(res => {
        if(res.data.code === 200){
          this.teamMembers = res.data.data
          this.teamName = teamName;
          this.teamInfo = teamInfo;
          this.teamDemand = teamDemand;
          this.captainName = captainName;
          this.dialogVisible = true
        }else{
          this.$message({
            message:res.data.msg,
            type:'error'
          })
        }
      })
    },
    async getTeamMembers(){
      getTeamMembers({teamId:this.currentTeamId}).then(res => {
        if(res.data.code === 200){
          this.teamMembers = res.data.data
        }else{
          this.$message({
            message:res.data.msg,
            type:'error'
          })
        }
      })
    },
    getUserInfo(userId, editAble) {

      console.log(userId);

      this.$router.push({
              path:  '/user-info',
              query:{
                userId:userId,
                editAble:editAble
              }
            })
    },
    getTeamInfoList(){
      getTeamInfoList({contestId :this.contestId}).then(res => {
        if(res.data.code === 200){
          this.data = res.data.data
        }else{
          this.$message({
            message:res.data.msg,
            type:'error'
          })
        }
      })
    },
    getContestSpeciesList() {
      getContestSpeciesList().then(res => {
        if(res.data.code === 200){
          this.speciesList = res.data.data
        }else {
          this.$message({
            message: res.data.msg,
            type: 'error'
          })
        }        
      })
    },
  
    },


  

  destroyed() {
    // clearInterval(this.timer)
  },
  components: {
  }
}
</script>
<style scoped>
.data_input_inner >>> .el-input__inner{
  width: 70%;
}
.inputHeight >>> .el-input__inner{
  height:120%
}
.input_text_inner >>> .el-textarea__inner{
  display: inline-block;
  height: 200px;
}
</style>
<style>
.teamInfoX .el-dialog__body{
  padding-top: 0px;
  margin-top:0px;
}
</style>
